<script setup lang="ts">
import { ref, onMounted } from "vue";
import { storageLocal } from "@pureadmin/utils";
import { initRouter, getAuths, hasAuth } from "@/router/utils";
import router from "@/router";
import { hasPerms } from "@/utils/auth";
import { useUserStoreHook } from "@/store/modules/user";
import { usePermissionStoreHook } from "@/store/modules/permission";

defineOptions({
  name: "TestingPermission"
});

// 当前路由权限
const routePermiss = ref();

// 当前用户权限
const userPermiss = ref();

// 当前用户名
const username = ref(useUserStoreHook()?.username);

// 用户切换清单
const options = [
  {
    value: "admin",
    label: "管理员角色"
  },
  {
    value: "common",
    label: "普通角色"
  }
];

// 切换密码
const password = ref("admin@123456");

// 方法：切换用户
function onChange() {
  useUserStoreHook()
    .loginByUsername(username.value, password.value)
    .then(async () => {
      storageLocal().removeItem("async-routes");
      usePermissionStoreHook().clearAllCachePage();
      await initRouter();
      window.location.reload();
    });
}

// 方法：重新获取权限
const getPermiss = () => {
  const auth = getAuths();
  routePermiss.value = auth;
  const user = useUserStoreHook();
  userPermiss.value = user.permissions;
};

onMounted(() => {
  getPermiss();
});
</script>

<template>
  <div>
    <el-card header="权限管理" class="mb-3">
      <n-list>
        <n-list-item>
          <n-thing
            title="路由权限（需要刷新生效）："
            title-extra="通过路由的 auths 配置项，赋予对应页面按钮级别权限"
          >
            <template #description>
              <div class="mt-3">
                <el-alert type="info" :closable="false">
                  {{ routePermiss }}
                </el-alert>
              </div>
            </template>
          </n-thing>
        </n-list-item>
        <n-list-item>
          <n-thing
            title="用户权限："
            title-extra="通过登录接口的 permissions 字段返回按钮级别权限"
          >
            <template #description>
              <div class="mt-3">
                <el-alert type="info" :closable="false">
                  {{ userPermiss }}
                </el-alert>
              </div>
            </template>
          </n-thing>
        </n-list-item>
        <n-list-item>
          <n-thing title="用户切换">
            <template #header-extra>
              <div class="flex">
                <el-input v-model="password" placeholder="请输入">
                  <template #prepend>密码</template>
                  <template #append>
                    <el-select
                      v-model="username"
                      class="w-[160px]!"
                      @change="onChange"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-input>
              </div>
            </template>
          </n-thing>
        </n-list-item>
      </n-list>
    </el-card>
    <el-card header="权限测试">
      <div class="mb-3">
        <Auth value="backend:btn:add">
          <el-button plain type="warning">
            路由 backend:btn:add 权限可见
          </el-button>
        </Auth>
        <Auth :value="['backend:btn:edit']">
          <el-button plain type="primary">
            路由 backend:btn:edit 权限可见
          </el-button>
        </Auth>
        <el-button v-if="hasAuth('backend:btn:delete')" plain type="danger">
          路由 backend:btn:delete 权限可见
        </el-button>
      </div>
      <div>
        <Perms value="permission:btn:add">
          <el-button plain type="warning">
            用户 permission:btn:add 权限可见
          </el-button>
        </Perms>
        <Perms :value="['permission:btn:edit']">
          <el-button plain type="primary">
            用户 permission:btn:edit 权限可见
          </el-button>
        </Perms>
        <el-button v-if="hasPerms('permission:btn:delete')" plain type="danger">
          用户 permission:btn:delete 权限可见
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
//
</style>
